<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue学习笔记</title>
    <script src="./js/vue.js"></script> 
</head>
<body>
    <!--vue的生命周期钩子函数-->
    <div class="root">
        <h2>人员列表</h2>
         <ul>
            <li v-for="(item,index) in persons" :key="item.id">
                {{item.name}} - {{item.age}}
            </li>
         </ul>
    </div>
    <script>
        const vm=new Vue({
            el:'.root',
            data(){
                return{
                    persons:[
                        {id:'001',name:'马冬梅',age:18},
                        {id:'002',name:'周冬雨',age:17},
                        {id:'003',name:'周杰伦',age:21},
                        {id:'004',name:'温兆伦',age:25},
                ],
                }
            },
            //这个阶段，数据和方法还没有初始化完成，访问不了persons数据，没有_data
            beforeCreate() {
                console.log('beforeCreate')
            },
            //这个阶段，数据和方法完成了，可以访问了
            created() {
                console.log('created')
            },
            //这个阶段，虚拟Dom节点产生
            beforeMount() {
                console.log('beforeMount')
            },
            //这个阶段很重要，Dom节点初次渲染完成，一般这个阶段可以发送ajax网络请求
            mounted() {
                console.log('mounted')
            },
            //beforeUpdate、updated一般没有什么作用
            //可以在这个生命周期钩子内部实现一些资源的清理
            beforeDestroy() {
                console.log('beforeDestroy')
            },
        })
    </script>
</body>
</html>